<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Logical Properties: Flow-Relative Border Colors in Visited Links</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#border-color" />
<link rel="help" href="https://drafts.csswg.org/selectors/#visited-pseudo" />
<link rel="match" href="logical-box-border-color-visited-link-003-expected.html" />
<meta name="assert" content="This test checks that mapping for flow-relative border colors in visited links uses :link's writing mode instead of :visited's one." />
<style>
a {
  display: inline-block;
  vertical-align: top;
  border: 25px solid green;
  border-top-color: red;
  border-left-color: red;
}
#link1:visited,
#link2,
#link3:visited,
#link4 {
  direction: rtl;
}
#link1:visited,
#link2:visited,
#link3,
#link4 {
  writing-mode: vertical-rl;
}
#link1:visited {
  border-block-start-color: green;
  border-inline-start-color: green;
}
#link2:visited {
  border-block-start-color: green;
  border-inline-end-color: green;
}
#link3:visited {
  border-inline-start-color: green;
  border-block-end-color: green;
}
#link4:visited {
  border-inline-end-color: green;
  border-block-end-color: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<!-- Links point to current URL, which should be visited -->
<a id="link1" href=""></a><a id="link2" href=""></a><br />
<a id="link3" href=""></a><a id="link4" href=""></a>
